<template>
    <el-container style="height: 100%;overflow: hidden">
        <el-header
                style="padding: 0px;border-bottom: 1px solid #dddddd;
                box-shadow: 0 0 10px 1px rgba(0, 0, 0, .1);">
            <el-col :span="8" class="title">
                <img src="../../static/img/loginHeader.jpg" alt="" style="height: 58px">
                <p style="margin-left: 70px;margin-top: -40px;">浙江省土地利用数据管理与分析平台</p>
            </el-col>
            <!--<el-col :span="2" class="title">-->
            <!--<div style="background-color: yellow;width: 100px;height: 80px;">{{user}}</div>-->

            <!--</el-col>-->
            <el-col :span="14" class="menu">
                <menuBar style="float: right;"></menuBar>
            </el-col>
            <el-col :span="2" class="title">
                <el-button v-if="user!=null" id="mybutton" type="primary" @click.native.prevent="logout"
                           style="margin-top: 20px;margin-left: 20px">{{user}}
                </el-button>
            </el-col>
        </el-header>
        <el-main style="overflow: hidden">
            <router-view style="height: 100%"></router-view>
        </el-main>
    </el-container>
</template>

<script>
    import menuBar from './menuBar'

    export default {
        components: {
            menuBar
        },
        data() {
            const item = {
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            };
            return {
                tableData: Array(20).fill(item),
                isCollapse: false
            }
        },

        methods: {
            init() {
                this.$store.dispatch('initial', {})

            },
            logout() {
                // alert("就你如函数")
                let that = this;
                this.$axios.post(that.$URL.userLogout).then(function (res) {
                    // alert("222222222")
                    if (res.code == 200) {
                        that.$message({
                            message: "用户退出登陆成功",
                            type: 'success'
                        });
                        that.$globalConstant.ifLogin=0;
                        that.$globalConstant.layerInfo.data = [];
                        sessionStorage.removeItem('user');
                        that.$router.push({path: '/login'});
                    }
                });
            },
            toggleClick() {
                this.isCollapse = !this.isCollapse
            }
        },
        computed: {
            user() {
                if (sessionStorage.getItem('user') != null) {
                    let curUser = JSON.parse(sessionStorage.getItem('user'));
                    return curUser["name"] + "注销";
                } else {
                    return "还未登录"
                }
                // if (sessionStorage.getCurrItem() != null) {
                //     document.getElementById("mybutton").innerHtml = "新按钮";
                // }
            }
        },
        mounted() {
            this.init()

        }
    }
</script>

<style>
    @import "../style/layout.css";
    @import "../style/dark.theme.css";

    html, body {
        /*修改整体页面的overflow*/
        /*overflow: auto;*/
        overflow: hidden;
        height: 100%;
    }

    .title {
        line-height: 60px;
        color: #2d2f33;
    }


</style>
